<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Import style -->
    <link rel="stylesheet" href="http://unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="http://unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="http://unpkg.com/element-plus"></script>
    <!-- <link href="./css/index.css" rel="stylesheet"> -->
    <link href="./css/3.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <el-card class="card" v-for="stu in stus">
            <template #header>
                <div class="card-header">
                    <span><el-avatar :size="50" :src="stu.avatar"></span>
                    <span class="name">{{stu.name}}</stu></span>
                </div>
            </template>
            <div>
                <p>年龄：{{stu.age}}</p>
                <p>性别：{{stu.sex}}</p>
                <p>总分：{{stu.score[0]+stu.score[1]+stu.score[2]}}</p>
            </div>
            <el-tooltip placement="buttom" v-if="stu.score[0]>=60&&stu.score[1]>=60&&stu.score[2]>=60">
                <template #content>
                    <p>语文：{{stu.score[0]}}</p>
                    <p>数学：{{stu.score[1]}}</p>
                    <p>英语：{{stu.score[2]}}</p>
                </template>
                <el-button>查看成绩单</el-button>
            </el-tooltip>
        </el-card>
    </div>
</body>
<script>
    const App = {
        data() {
            return {
                stus:
                    [
                        { id: "", name: "1", age: 20, sex: "男", score: [90, 80, 80],  avatar: "https://img0.baidu.com/it/u=2176773044,1882379085&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380" },
                        { id: "", name: "2", age: 20, sex: "男", score: [70, 70, 100],  avatar: "https://img0.baidu.com/it/u=3686098616,3825479132&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200" },
                        { id: "", name: "3", age: 20, sex: "男", score: [90, 60, 70],  avatar: "https://img0.baidu.com/it/u=685941825,2802132663&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" },
                    ],
                    report:{},
                    drawer:false
            }
        },
        methods: {}
    }
    Vue.createApp(App).use(ElementPlus).mount('#app')
</script>

</html>